<template>
  <div class="re" v-if="show">
    <div class="title">回寄:</div>
    <template v-if="+status === 0">
      <div class="text">
        <span class="left">收件人:</span>
        <span class="right">{{name}}</span>
      </div>
      <div class="text">
        <span class="left">电话:</span>
        <span class="right">{{mobile}}</span>
      </div>
      <div class="text">
        <span class="left">地址:</span>
        <span class="right">{{address}}</span>
      </div>
      <div class="text">
        <span class="left">快递单号:</span>
        <span class="right">
          <input v-model="logistics" />
          <button @click="saveRe">确 定</button>
        </span>
      </div>
    </template>
    <div v-else>
        已完成, 回款: {{+real_amount}}
    </div>
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
export default {
  props: ['order'],
  data() {
    return {
      first_product_id: 0,
      show: false,
      address: '',
      mobile: '',
      name: '',
      logistics: '',
      status: 0,
      real_amount: 0
    }
  },
  methods: {
    saveRe() {
      // console.log(this.order.sn, this.logistics)
      if (!this.logistics) {
        return this.$createToast({
          type: 'error',
          txt: '请填写快递单号',
          time: 1000
        }).show()
      }
      if (this.status === 0) {
        api.My.reSave({ sn: this.order.sn, logistics: this.logistics}).then(() => {
          return this.$createToast({
            txt: '操作成功',
            time: 1000
          }).show()
        })
      }
    }
  },
  mounted() {
    const item = this.order.item
    if (item[0]) {
      this.first_product_id = +(item[0].product_id)
      // console.log(this.first_product_id)
      api.My.re({ product_id: this.first_product_id, sn: this.order.sn }).then(response => {
        let { data } = response
        data = base64.parse(data)
        console.log(data)
        this.show = data.show
        this.address = data.address
        this.mobile = data.mobile
        this.name = data.name
        this.status = data.status
        this.logistics = data.logistics
        this.real_amount = data.real_amount
        // 待支付, 待发货
        if (+this.order.status === 0 || +this.order.status === 1) {
          this.show = false
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.re
  border 1px solid #ccc
  padding 5px
  .title
    height 20px
    line-height 20px
    font-weight 700
  .text
    display flex
    line-height 20px
    letter-spacing 1px
    .left
      width 65px
    .right
      flex 1
      display flex
      align-items center
      input
        height 22px
        line-height 22px
        border 1px solid #ccc
        padding 0 5px
        width 180px
      button
        margin-left 5px
        height 24px
        line-height 24px
        border 1px solid #ccc
        width 50px
</style>
